<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <div id="app">
			  <h1>Hello App!</h1>
			  <p>
			    <!-- 使用 router-link 组件来导航. -->
			    <!-- 通过传入 `to` 属性指定链接. -->
			    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			    <router-link to="/user/foo">Go to User</router-link>
			  </p>
			  <!-- 路由出口 -->
			  <!-- 路由匹配到的组件将渲染在这里 -->
			  <router-view></router-view>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<script>
			 //取代与$route的耦合
			  	const User = {
				  template: '<div>User {{ $route.params.id }}</div>'
				}
				const router = new VueRouter({
				  routes: [
				    { path: '/user/:id', component: User }
				  ]
				})
			//通过props解耦
			    const User = {
				  props: ['id'],
				  template: '<div>User {{ id }}</div>'
				}
				const router = new VueRouter({
					  routes: [
					    { path: '/user/:id', component: User, props: true },
					
					    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
					    {
					      path: '/user/:id',
					      components: { default: User, sidebar: Sidebar },
					      props: { default: true, sidebar: false }
					    }
					  ]
				})
			//对象模式传参
			    const router = new VueRouter({
					  routes: [
					    { path: '/user', component:User, props:{id:75}}
					  ]
				})
			//函数模式传参
			//URL /user?q=vue 会将 {id:'vue'} 作为属性传递给 User组件
			    const router = new VueRouter({
					  routes: [
					    { path: '/user', component:User, props:(route) => ({id:route.query.q})}
					  ]
				})
		</script>
	</body>
</html>
